<template>
	<view class="page-box">
		<view class="order" v-for="(item, index) in list" :key="item.id">
			<view class="order-info" @click="toServeView(item.id)">
				<view class="u-font-32 font-medium u-m-b-20 u-line-1">{{item.title}}</view>
				<view class="u-flex">
					<view class="price u-flex-1">
						{{item.price}}
					</view>
					<text class="u-font-20 u-light-color">发布时间：{{item.add_time}}</text>
				</view>
			</view>
			<view class="order-action">
				<view class="u-tips-color u-flex-1">
					<text v-if="item.status==2||item.status==0">已陪同服务 {{item.sales}} 人</text>
					<text v-if="item.status<0">{{item.refusal}}</text>
				</view>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status==1"
					@click="cancelServe(item.id)">撤销审核</u-button>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status==2"
					@click="closeServe(item.id)">下架</u-button>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status<=0"
					@click="editServe(item.id)">编辑</u-button>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status<=0"
					@click="deleteServe(item.id)">删除</u-button>

			</view>
		</view>
		<u-modal v-model="cancelModal" @confirm="cancelHandle" ref="cancelModal" :async-close="true" content="确定要撤销该需求的审核吗？"
			show-cancel-button :confirm-color="$appConfig.mainColor" z-index="9999"></u-modal>
		<u-modal v-model="closeModal" @confirm="closeHandle" ref="closeModal" :async-close="true" content="确定要下架此项服务吗？"
			show-cancel-button :confirm-color="$appConfig.mainColor"></u-modal>
		<u-modal v-model="deleteModal" @confirm="deleteHandle" ref="deleteModal" :async-close="true" title="确定要删除此服务吗？"
			content="删除后，无法恢复" show-cancel-button :confirm-color="$appConfig.mainColor"></u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				currentId: '',
				cancelModal: false,
				closeModal: false,
				deleteModal: false
			}
		},
		onLoad() {

		},
		methods: {
			// 撤销审核
			cancelServe(id) {
				this.currentId = id;
				this.cancelModal = true
			},
			cancelHandle() {
				this.$u.api.cancelServe(this.currentId).then(res => {
					this.cancelModal = false
					this.$emit('change')
				})
			},
			// 下架
			closeServe(id) {
				this.currentId = id;
				this.closeModal = true
			},
			closeHandle() {
				this.$u.api.closeServe(this.currentId).then(res => {
					this.closeModal = false
					this.$emit('change')
				})
			},
			// 删除
			deleteServe(id) {
				this.currentId = id;
				this.deleteModal = true
			},
			deleteHandle() {
				this.$u.api.deleteServe(this.currentId).then(res => {
					this.deleteModal = false
					this.$emit('change')
				})
			},
			// 编辑
			editServe(id) {
				this.currentId = id;
				this.$u.route('/pages/subpage/publish/service', {
					id
				})
			},
			// 详情
			toServeView(id) {
				this.$u.route('/pages/subpage/list/serv_detail', {
					id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-box {
		padding: 30rpx 30rpx 120rpx;

		.order {
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.order-info {
				padding: 30rpx 30rpx 20rpx;
				border-bottom: 0.5px solid #EEEEEE;
			}

			.order-action {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>